<template>
	<view class="login-container">
		<view class="login-title">
			<view>你好,</view>
			<view>
				欢迎登录
				<span style="color: #0082fe">桌趣</span>
			</view>
		</view>
		<view class="phone-value" v-if="!getCodeShow">
			<fui-input :padding="['20rpx', '32rpx']" label="手机号码" :bottomLeft="0" placeholder="请输入手机号码" v-model="phone" class="ipt"></fui-input>
			<fui-input :padding="['20rpx', '32rpx']" label="验证码" :bottomLeft="0" placeholder="请输入手机验证码" v-model="VBCode" class="ipt">
				<fui-countdown-verify ref="fui_cdv" @send="sendCode"></fui-countdown-verify>
			</fui-input>
		</view>
		<view class="btn flex-center">
			<fui-button radius="60rpx" width="68%" :disabled="VBCode != '' ? false : true" @click="handleLogin">登录</fui-button>
		</view>
	</view>
</template>

<script>
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue';
import { getPhoneNumber, getVerifyCode, login } from '@/request/modules/login.js';
import { showMsg } from '../../utils/interact';
import { useUserStore } from '../../store/user';
import { getUserSigApi } from '../../request/modules/chat';
export default defineComponent({
	name: 'login',
	setup() {
		const state = reactive({
			title: '登录',
			phone: '',
			VBCode: '',
			show: false, //控制授权手机号
			code: '',
			isDisabledOfLoginBtn: true
		});
		const fui_cdv = ref(null);
		const closePopup = () => {
			state.show = false;
		};
		let userSig = '';
		// 仓库数据
		const userStore = useUserStore();
		const decryptPhoneNumber = async (e) => {
			if (e) state.show = false;
			console.log(e);
			uni.login({
				provider: 'weixin', //使用微信登录
				success: async (res) => {
					console.log(res.code);
					await getPhoneNumber({
						code: res.code,
						encryptedData: e.encryptedData,
						iv: e.iv
					}).then((res) => {
						console.log(res);
						if (res.status == 200) {
							state.phone = res.phone;
							uni.showToast({
								title: res.message,
								icon: 'success',
								duration: 1000
							});
						}
					});
				}
			});
			getPhoneNumber({
				code: state.code,
				encryptedData: e.encryptedData,
				iv: e.iv
			}).then((res) => {
				console.log(res);
			});
		};
		const getCode = () => {
			uni.login({
				provider: 'weixin', //使用微信登录
				success: (res) => {
					console.log(res);
				}
			});
		};
		const sendCode = async () => {
			//手机号正则
			if (!/^\d{11}$/.test(state.phone)) {
				//验证未通过
				showMsg('请输入正确的手机号');
				fui_cdv.value.reset();
			} else {
				//验证通过，发起ajax请求传手机号获取验证码
				try {
					const res = await getVerifyCode({
						phone: state.phone
					});
					// #ifdef APP-PLUS
					plus.nativeUI.toast('验证码已发送', {
						background: '#55ff00',
						verticalAlign: 'top'
					});
					// #endif
					if (res.statusCode !== 200) return showMsg('手机号或验证码错误', 'error');
					fui_cdv.value.success();
				} catch (e) {
					fui_cdv.value.reset();
					//TODO handle the exception
				}
			}
		};

		// 登录
		const handleLogin = async () => {
			try {
				const res = await login({
					phone: state.phone,
					verificationCode: state.VBCode
				});
				if (res.statusCode == 401) {
					showMsg('手机号或验证码错误，若二者都正确，则验证码过期，请重新获取', 'none', 2000);
				} else if (res.statusCode == 200) {
					let {
						data: {
							data: { phone, userId: userID, userPhoto }
						}
					} = res;
					//登录成功，存储相关数据并跳转到首页
					uni.setStorageSync('phone', phone);
					uni.setStorageSync('user_id', userID);
					uni.setStorageSync('avator_url', userPhoto || '');

					uni.switchTab({
						url: '/pages/home/index'
					});
				} else {
					showMsg('登录失败', 'error');
				}
			} catch (e) {
				//TODO handle the exception
			}
		};
		// 微信登录
		const loginMethod = () => {
			let code;
			// 获取code
			uni.login({
				provider: 'weixin',
				onlyAuthorize: true,
				success: (res) => {
					code = res.code;
					// 获取"encryptedData"和"iv":
					uni.getUserInfo({
						provider: 'weixin',
						success(res) {
							console.log(res);
						},
						fail(err) {
							console.log(err);
						}
					});
				},
				fail(err) {
					if (err.code == -8) {
						showMsg('请安装微信客户端');
					}
				}
			});
		};
		const getUserInfo = (e) => {
			console.log(e);
		};
		return {
			...toRefs(state),
			fui_cdv,
			getCode,
			decryptPhoneNumber,
			sendCode,
			handleLogin,
			loginMethod,
			getUserInfo
		};
	}
});
</script>

<style scoped lang="scss">
.login-container {
	.login-title {
		margin-left: 40rpx;
		text-align: left;
		padding-top: 100rpx;

		view {
			font-size: 60rpx;
			font-weight: bold;
			color: #000000;
		}
	}

	.phone-value {
		margin-top: 200rpx;
		margin-bottom: 270rpx;
		.ipt {
			font-size: 28rpx;
		}
	}
	.btn {
	}
}
</style>
